<template>

	<div class="page">
		<view class="w100 header flex-row flex-al flex-jc">
			<view class="flex-row flex-al ser-box" @click="toSearch">
				<text class="iconfont icon-sousuo"></text>
				<input placeholder="搜公交路线"></input>
			</view>
		</view>
		<image class="lode" src="/static/imgs/loding.png" v-if="!sites"></image>

		<view class="site" v-for="(item,i) in sites" :key="item.arr[item.show].stationId" v-show="item.arr[item.show].linInfoLansis.length">
			<view class="flex-row flex-sb site-header">
				<view class="site-header-left flex-row flex-al">
					<image src="/static/imgs/loca.png"></image>
					<text class="site-name"  @click="openLocation(i)">{{(item.arr[item.show].stationName)}}</text>
					<text class="site-d">距您{{ Math.round(item.arr[item.show].distance*1000)>=1000?(Math.round(item.arr[item.show].distance*100) /100)+'千米':Math.round(item.arr[item.show].distance*1000)+'米'}}</text>
					<!-- <text class="site-d">距您{{}}千米</text> -->
				</view>
				<view class="site-lo flex-row flex-al" @click="changeWay(i)">
					<image src="/static/imgs/loca2.png"></image>
					<text>{{item.arr.length==2?(item.show?' 上行':' 下行'):'单向'}}</text>
				</view>
			</view>
			<view class="sites flex-row flex-sb flex-al">
				<view v-if="line.busNum!=null" class="line-item" hover-class="line-item-hover" v-for="(line,u) in item.arr[item.show].linInfoLansis" :key="line.id" @click="toLined(i,u)" v-show="line.isUpDown==item.arr[item.show].upDown">
					<view class="line-header flex-row flex-al flex-sb">
						<view class="flex-row flex-al ">
							<image src="/static/imgs/bus.png"></image>
							<text>{{line.busNum==null?'暂无车辆':'运营中'}}</text>
						</view>
						
						<text style="font-size:38rpx;font-weight:blod;">{{line.lineName.replace('XY','').replace('夜班','夜')}}</text>
					</view>
					<view class="line-name">
						开往{{line.endStationName}}
					</view>
				</view>
				<view v-if="line.busNum==null" class="line-item-blue" hover-class="line-item-hover" v-for="(line,u) in item.arr[item.show].linInfoLansis" :key="line.id" @click="toLined(i,u)" v-show="line.isUpDown==item.arr[item.show].upDown">
					<view class="line-header flex-row flex-al flex-sb">
						<view class="flex-row flex-al ">
							<image src="/static/imgs/bus.png"></image>
							<text>{{line.busNum==null?'暂无车辆':'运营中'}}</text>
						</view>
						
						<text style="font-size:38rpx;font-weight:blod;">{{line.lineName.replace('XY','').replace('夜班','夜')}}</text>
					</view>
					<view class="line-name">
						开往{{line.endStationName}}
					</view>
				</view>
			</view>
		</view>
	</div>
</template>
<script>
	import HttpModule from "../../../module/httpModule.js"
	const httpModule = new HttpModule();
	export default {
		data() {
			return {
				latitude: null,
				longitude: null,
				sites: null
			}
		},
		async onLoad() {
			
		
			// 开始下拉

			await httpModule.startPullDownRefresh();
		},
		//下拉事件
		async onPullDownRefresh() {
			// uni.showLoading({title:"加载站点中"})
			console.log('下拉事件')
			await this.getallSites()

		},
		methods: {
			
			//获取站点
			changeWay(i){
				if(this.sites[i].arr.length==2){
					this.sites[i].show=this.sites[i].show==1?0:1
				}
				console.log(this.sites[i])
			},
			async getallSites() {
				uni.showLoading({
					title: '加载附近站点中',
					mask: true
				})
				const local = await httpModule.getlocal(); //获取位置；
				const latitude = local.latitude;
				const longitude = local.longitude;
				this.latitude = latitude;
				this.longitude = longitude;
				console.log(latitude,longitude)
				var sites = (await httpModule.getMyStations2({
					longitude: this.longitude,
					page:1,
					limit:20,
					latitude: this.latitude
				})).data.sitesD
				const bus = (await httpModule.getBusInfo()).data.data;
				// lineNo
				console.log('bus')
				console.log(bus)

				
				console.log(sites)
				function groupBy(array, f) {
				  const groups = {};
				  array.forEach(function (o) {
				    const group = JSON.stringify(f(o));
				    groups[group] = groups[group] || [];
				    groups[group].push(o);
				  });
				  return Object.keys(groups).map(function (group) {
				    return {show:0,
					arr:groups[group]
					};
				  });
				}
				const sorted = groupBy(sites, function (item) {
				  return [item.stationName];
				});
				console.log(sorted);
				
				
				 // 方法2：利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
				// let  obj = {};
				//   sites = sites.reduce(function(item, next) {
				//    obj[next.stationName] ? '' : obj[next.stationName] = true && item.push(next);
				//    return item;
				//   }, []);
				// console.log(sites)
				
				this.sites = sorted;
				await httpModule.stopPullDownRefresh();
				uni.hideLoading()
				uni.showToast({
					title: "加载成功",
					icon: 'none',
					position: 'bottom'
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/realRime/search/index/index',
				})
			},
			toLined(i,u) {
				console.log(i,u)
				// firstTime
				// lastTime
				console.log(this.sites[i].arr[this.sites[i].show])
				let l=this.sites[i].arr[this.sites[i].show].linInfoLansis[u];
				// /pages/realRime/line/index/index?lineNo=${l.lineNo}&source=${l.source}&isUpDown=${l.isUpDown}
				uni.navigateTo({
					url: `/pages/realRime/line/index/index?lineNo=${l.lineNo}&source=${l.source}&isUpDown=${l.isUpDown}&lineName=${l.lineName}&firstTime=${l.firstTime}&lastTime=${l.lastTime}`,
				})
			},
			 openLocation(index){
			    let site = this.sites[index];
			    console.log(site)
			    uni.openLocation({
			      latitude: parseFloat(site.latitude),
			      longitude: parseFloat(site.longitude),
			      name: site.stationName,
			      address: site.stationName
			    })
			  },
		}
	}
</script>

<style scoped>
	.header {
		height: 161rpx;
		background: #fff
	}

	.ser-box {
		width: 654rpx;
		height: 92rpx;
		border-radius: 7rpx;
		border: 1rpx solid rgba(151, 151, 151, 1);
	}

	.ser-box text {
		margin-left: 38rpx;
		margin-right: 17rpx;
		color: #6D6D6D
	}

	.ser-box input {
		font-size: 32rpx;
		color: #6D6D6D
	}

	.site {
		background: #fff;
		margin-top: 10rpx;
		padding-bottom: 45rpx;
	}

	.site-header {
		width: 654rpx;
		margin: 0 auto;
		padding-top: 34rpx;
	}

	.site-header-left image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 9rpx;
	}

	.site-header-left .site-name {
		font-size: 30rpx;
		font-weight: bolder;
		color: rgba(42, 42, 42, 1);
		margin-right: 16rpx;
	}

	.site-header-left .site-d {
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(109, 109, 109, 1);
		margin-right: 16rpx;
	}

	.site-lo image {
		width: 29rpx;
		height: 29rpx;
		margin-right: 10rpx;
	}

	.site-lo text {
		font-size: 26rpx;
		font-weight: bold;
		color: rgba(109, 109, 109, 1);
	}

	.sites {
		width: 654rpx;
		margin: 0 auto;
		flex-wrap: wrap;
		margin-top: 23rpx;
	}

	.sites .line-item {
		margin-top: 24rpx;
		width: 316rpx;
		background:rgba(62,198,148,1);
		border-radius: 7rpx;
		padding: 21rpx 21rpx;
		box-sizing: border-box;
	}.sites .line-item-blue {
		margin-top: 24rpx;
		width: 316rpx;
		background:rgba(62,139,198,1);
		border-radius: 7rpx;
		padding: 21rpx 21rpx;
		box-sizing: border-box;
	}

	.sites .line-item-nobus {

	}

	.line-item-hover {
		transform: scale(1.05)
	}

/* 	.line-header {
		margin-top: 20rpx;
		margin-left: 20rpx;
	} */

	.line-header image {
		width: 31rpx;
		height: 31rpx;
		margin-right: 10rpx;
	}

	.line-header text {
		font-size: 27rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	.line-name {
		max-width: 100%;
		min-width: 100%;
		margin: 0 auto;
		overflow: hidden;
		color:rgba(255,255,255,1);
		white-space: nowrap;
		font-size:27rpx;
	}

	.lode {
		display: block;
		width: 384rpx;
		height: 235rpx;
		margin: 0 auto;
		margin-top: 300rpx;
	}
</style>
